<!-- 邀请 -->
<template>
	<view class="container">
		<!-- 邀请头 -->
		<view class="head">

			<view class="q">邀请越多，奖励越多官方qq群(62874934)</view>
			<view class="b flex">
				<uqrcode ref="uqrcode"></uqrcode>
				<view class="r flex-c-a">
					<view class="invite">
						<text class="invite-text">我的邀请码：</text>
						<text class="invite-code">fdskbv123</text>
					</view>

					<view class="btn flex">
						<u-button :custom-style="customStyleDetail" type="warning" shape="circle" plain size="mini"
							class="share" @click="$u.func.route('/pages/deal/dealDetail')">复制邀请地址</u-button>
						<u-button :custom-style="customStyleDetail" type="warning" shape="circle" plain size="mini"
							class="share" @click="$u.func.route('/pages/deal/dealDetail')">复制邀请码</u-button>

					</view>
				</view>
			</view>
		</view>
		<!-- 邀请明细 -->
		<view class="detail flex-c">
			<view class="detail-t flex">
				<view class="item flex-c-c" v-for="i in 3">
					<text class="title">累计邀请人数</text>
					<text class="num">333</text>
				</view>
			</view>
			<view class="detail-b flex">
				<view>
					<text class="draw-title">可提现金额：</text>
					<text class="draw-num">1488ff</text>
				</view>
				<view class="flex">
					<u-button :custom-style="customStyleDetail2" type="warning" shape="circle" size="mini" class="share"
						@click="showDrawPopup = true">提现</u-button>
				</view>

			</view>
		</view>
		<!-- 列表 -->
		<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#1488FF" inactive-color="#666666"  ref="tabs" :list="tabs" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(pitem, pindex) in tabs" :key="pindex">
				<scroll-view scroll-y style="width: 100%; height: 100%">
					<view class="content" v-if="current == 0">
						<view class="list">
							<view class="list-head">
								<text>账号</text>
								<text>VIP等级</text>
								<text>注册日期</text>
							</view>
							<view class="list-item" v-for="i in 10" :key="i">
								<text>wangge</text>
								<text>VIP1</text>
								<text>2021-08-01</text>
							</view>
						</view>
					</view>
					<view class="content" v-if="current == 1">
						<view class="list">
							<view class="list-head">
								<text>好友账号</text>
								<text>奖励积分</text>
								<text>充值时间</text>
							</view>
							<view class="list-item" v-for="i in 10" :key="i">
								<text>wangge</text>
								<text>300</text>
								<text>2021-08-01</text>
							</view>
						</view>
					</view>
					<view class="content" v-if="current == 2">
						<!-- <view class="item-strategy">
							<view class="summary">
								<view class="summary-title row">
									<text>总计提现</text>
									<text>剩余</text>
									<text>待审核</text>
								</view>
								<view class="summary-content row">
									<text>3289</text>
									<text>443</text>
									<text>30</text>
								</view>
							</view>
						</view> -->
						<view class="list">
							<view class="list-head">
								<text>单号</text>
								<text>金额</text>
								<text>状态</text>
								<text>时间</text>
							</view>
							<view class="list-item" v-for="i in 10" :key="i">
								<text>u20210201</text>
								<text>300USTD</text>
								<text>审核中</text>
								<text>2021-08-01</text>
							</view>
						</view>

						<!-- 提现规则 -->
						<view class="rule">
							<text class="title"> 提现规则</text>
							<view class="content">
								<text>1. 账户提现金额必须为50usdt倍数,申请提现必须为软件付费会员</text>
								<text>2. 提现时间任意，提现申请每月13-15审核处理</text>
								<text>3. 提现规则最终解释权归YD量化官方所有</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<u-popup v-model="showDrawPopup" mode="bottom" length="50%" closeable>
			<view class="content2">
				<view class="line flex-s">
					<text class="title">提现金额：</text>
					<view class="flex-s">
						<text class="m flex">368145</text>
						<text>USDT</text>
					</view>
					<view class="note">*提现金额50USDT的倍数</view>
				</view>

				<view class="line flex-s">
					<text class="title">TRC20 收款地址：</text>
					<view class="flex-s">
						<u-input v-model="dwawAddress" type="text"  :border="border" height="90" :custom-style='inputStyle'/>
					</view>
					<view class="note">*请确定你的TRC20地址真实无误， 因地址错误导致充值失败则无法挽回。</view>
				</view>
				<u-button shape="circle" :ripple="true" ripple-bg-color="#909399" :custom-style="customStyle">确认</u-button>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 提现
				showDrawPopup: false,
				dwawAddress:'',
				border:true,
				inputStyle:{
					width: '500rpx',
				},
				customStyle: {
					marginTop: "160rpx", // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color:'#fff',
          width: '686rpx',
          height: '90rpx',
          backgroundColor:'#1488FF'
				},
				customStyleDetail: {
					width: '210rpx',
					height: '64rpx',
					border: '2rpx solid'
				},
				customStyleDetail2: {
					width: '148rpx',
					height: '64rpx',
					backgroundColor: '#1488FF',
					border: '2rpx solid'
				},
        // tab
        swiperHeight: 0,
        tabs: [
          {
            name: "邀请明细",
            triggered: false,
            _triggered: false,
          },
          {
            name: "奖励明细",
            triggered: false,
            _triggered: false,
          },
          {
            name: "提现明细",
            triggered: false,
            _triggered: false,
          },
        ],
        dx: 0,
        current: 0,
        swiperCurrent:0,
			};
		},
		onReady() {
			this.$refs
				.uqrcode
				.make({
					size: 100,
					text: 'http://yide.aqielife.cn'
				})
				.then(res => {
					// 返回的res与uni.canvasToTempFilePath返回一致
					console.log('生成二维码', res)
					this.promoteCodeImg = res.tempFilePath
				})

		},
		components: {},

		computed: {},

		mounted() {},

		methods: {
      // tab 切换
      transition({ detail: { dx } }) {
        this.$refs.tabs.setDx(dx);
      },
      animationfinish({ detail: { current } }) {
				this.swiperCurrent = current;
        this.current = current;
        this.$refs.tabs.setFinishCurrent(current);
        
      },

      change(index) {
        this.swiperCurrent = index;
      },
      initInfo() {},
      copyKefu() {
        var that = this;
        uni.setClipboardData({
          data: that.downurl,
          success: function () {
            uni.showToast({ title: "已复制", duration: 3000 });
          },
        });
      },
      copyId() {
        var that = this;
        uni.setClipboardData({
          data: that.id,
          success: function () {
            uni.showToast({ title: "已复制", duration: 3000 });
          },
        });
      },
    }
	}
</script>
<style lang='scss' scoped>
  @import "@/styles/line.scss";
	.container {
		padding: $p;
		background-color: $b;
    min-height: 100vh;
		.head {
			width: $w;
			height: 290rpx;
			padding: 32rpx 25rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.q {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.r {
				width: 600rpx;
				height: 200rpx;
				// border: 1px solid red;
				margin-top: 30rpx;
				margin-left: 10rpx;

				.invite-text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.invite-code {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFB400;
				}

				.btn {
					margin-top: 30rpx;
				}
			}
		}

		.detail {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: $w;
			height: 268rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 30rpx 10rpx;

			.detail-t {
				.item {
					width: 100%;

					.title {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.num {
						font-size: 36rpx;
						font-family: DINPro;
						font-weight: bold;
						color: #333333;
					}
				}
			}

			.detail-b {
				padding: 0 20rpx;

				.draw-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.draw-num {
					font-size: 36rpx;
					font-family: DINPro;
					font-weight: bold;
					color: #1488FF;
				}
			}
		}

    .swiper-box{
      min-height: 600rpx;
    }
	}

	.content2 {
		padding: 80rpx 30rpx;
		.line {
			position: relative;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			.title{
				width: 160rpx;
			}
			.m {
				width: 228rpx;
				height: 90rpx;
				border: 2rpx solid #1488FF;
				border-radius: 20rpx;
				font-size: 48rpx;
				font-family: DINPro;
				font-weight: bold;
				color: #1488FF;
				justify-content: center;
				margin-right: 30rpx;
			}
			.note {
				position: absolute;
				top:100rpx;
				left:140rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FE5021;
			}
		}
		.line:nth-child(2) {
			margin-top: 70rpx;
		}
		
	}
</style>
